<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>菜鸟教程(runoob.com)</title>
    <style>
        /* @media 规则 */
        /* @media 规则允许在相同样式表为不同媒体设置不同的样式。 */

        /* 在下面的例子告诉我们浏览器屏幕上显示一个 14 像素的 Verdana 字体样式。
        但是如果页面打印，将是 10 个像素的 Times 字体。
        请注意，font-weight 在屏幕上和纸上设置为粗体： */
        @media screen {
            p.test {
                font-family: verdana, sans-serif;
                font-size: 14px;
            }
        }

        @media print {
            p.test {
                font-family: times, serif;
                font-size: 10px;
            }
        }

        @media screen,
        print {
            p.test {
                font-weight: bold;
            }
        }

        /* 你可以自己尝试看看 ! 如果您使用的是 Mozilla / Firefox 或 IE5+ 打印此页，
        你会看到，媒体类型将使用另一种比其他文本字体大小小点的字体显示。 */
    </style>
</head>

<body>
    <p class="test">菜鸟教程 -- 学的不仅是技术，更是梦想！！！</p>
</body>

</html>